<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<js file="__STATIC__/hdjs/jquery-1.7.2.min.js"/>
	
	<style type="text/css">
		*{
			list-style: none;
			padding: 0;
			margin:0;
		}
		ul li{
			width:150px; 
			height: 200px;
			border:1px solid #ccc;
			float: left;
			margin-right: 10px;
			border-radius: 8px;
		}
		ul li div.pic{
			width: 150px;
			height: 150px;
		}
		ul li div.pic img{
			width: 150px;
			height: 150px;
		}
		ul li .msg{
			height: 50px;
			font-size: 12px;
			color: #a5a5a5;
		}
		ul li .msg p{
			line-height: 15px;
		}

		.active{
			border:1px solid red;
		}
	</style>	
</head>
<body>
	<ul id="style">
		<list from="$dirs" name="$d">
			<li class="{$d['active']}" stylename="{$d['filename']}">
				<div class="pic">
					<img src="{$d['pic']}" alt="">
				</div>
				<div class="msg">
					<p>{$d['msg']['author']}</p>
					<p>{$d['msg']['stylename']}</p>
					<p>{$d['msg']['qq']}</p>
				</div>
			</li>
		</list>
	</ul>
	<script type="text/javascript">
		$(function(){
			$('#style li').click(function(){
				stylename = $(this).attr('stylename');
				_this = $(this);
				$.ajax({
					url:"{|U:'Config/ajaxChang'}",
					data:{stylename:stylename},
					dataType:'json',
					type:'post',
					success:function(data){
						if(data.status==1){
							$('#style li').removeClass('active');
							_this.addClass('active');
						}
					}
				})
			})
		})
	</script>	
</body>
</html>